<template>
	<view class="i-boutique-recommend" :style="[viewStyle]">
		<view :class="{ 'e-flex e-flex-wrap e-flex-items-start e-rela': option.layoutType != 1 }">
			<view :class="[layoutClass]"
				:style="[bodyStyle,{backgroundColor: props.option.layoutType == 2 ? item.backgroundColor : ''}]"
				v-for="(item, index) in option.list" :key="index" @tap="jumpLink(item.link)">
				<view>
					<view class="sub-title" :style="[{ color: item.subTitleTextColor }]" v-if="option.layoutType != 1">
						{{ item.subTitleText }}
					</view>
					<view class="title" :style="[{ color: item.titleTextColor }]">{{ item.titleText }}</view>
					<template v-if="option.layoutType == 1">
						<view class="sub-title" :style="[{ color: item.subTitleTextColor }]">
							{{ item.subTitleText }}
						</view>
						<view class="e-flex e-flex-end">
							<view class="button"
								:style="[{ backgroundColor: item.buttonColor, color: item.buttonTextColor }]">
								{{ item.buttonText }}</view>
						</view>
					</template>
			
				</view>
				<image mode="aspectFill" class="img" :src="$fullLink(item.contentUrl)" @tap.stop="jumpLink(item.link)">
				</image>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { computed } from 'vue'
	import { useLayoutCompoments } from './hooks'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import { px2rpx } from './utils'
	import type { pageLink } from './type'

	type BoutiqueRecommendItem = {
		titleText : string,
		titleTextColor : string,
		subTitleText : string,
		subTitleTextColor : string,
		contentUrl : string,
		backgroundColor : string,
		buttonText : string,
		buttonColor : string,
		buttonTextColor : string,
		link : pageLink
	}

	const props = withDefaults(defineProps<{
		option : {
			layoutType : 0 | 1 | 2 | 3,
			styleType : 0 | 1 | 2,
			backgroundColor : string,
			paddingTop : number,
			paddingBottom : number,
			paddingX : number,
			radiusTop : number,
			radiusBottom : number,
			list : BoutiqueRecommendItem[]
		}
	}>(), {
		option: () => ({
			layoutType: 1,
			styleType: 0,
			backgroundColor: '',
			paddingTop: 12,
			paddingBottom: 12,
			paddingX: 0,
			radiusTop: 0,
			radiusBottom: 0,
			list: []
		})
	})

	const ctx = useCurrentInstance()
	const { viewStyle,jumpLink } = useLayoutCompoments(ctx, props.option)

	const layoutClass = computed(() => {
		return [`layout${props.option.layoutType}`, props.option.styleType == 1 ? 'shadow' : '', props.option
			.styleType == 2 ? 'border-dc' : ''
		]
	})

	const bodyStyle = computed(() => {
		return {borderRadius: `${px2rpx(props.option.radiusTop)} ${px2rpx(props.option.radiusTop)}  ${px2rpx(props.option.radiusBottom)} ${px2rpx(props.option.radiusBottom)}` }
	})
</script>

<style lang="scss" scoped>
	@import '@/components/list/css/layoutCommon.scss';

	.layout1 {
		position: relative;
		overflow: hidden;

		.img {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}

		>view {
			position: relative;
			padding: 28rpx 60rpx;
			text-align: right;
			z-index: 1;

			.title {
				font-size: 30rpx;
				margin-bottom: 10rpx;
			}

			.sub-title {
				font-size: 44rpx;
				font-weight: 600;
				line-height: 60rpx;
				margin-bottom: 20rpx;
			}

			.button {
				text-align: center;
				width: 200rpx;
				line-height: 64rpx;
				border-radius: 32rpx;
			}
		}
	}

	.layout2 {
		flex: 0 0 calc(50% - 8rpx);
		margin: 0 16rpx 16rpx 0;
		padding: 16rpx 20rpx;
		overflow: hidden;

		&:nth-child(2n) {
			margin-right: 0;
		}

		.img {
			width: 100%;
			height: 160rpx;
		}

		.sub-title {
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 2rpx;
		}

		.title {
			font-size: 24rpx;
			margin-bottom: 20rpx;
		}
	}

	.layout3 {
		flex: 0 0 calc(50% - 8rpx);
		width: calc(50% - 8rpx);
		height: 172rpx;
		position: relative;
		overflow: hidden;

		.img {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}

		>view {
			position: relative;
			z-index: 1;
			padding: 20rpx;
		}

		.title {
			font-size: 24rpx;
		}

		.sub-title {
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 2rpx;
		}

		&:first-child {
			// flex: 0 0 50%;
			height: 364rpx;
			margin-right: 16rpx;

			>view {
				padding: 20rpx 36rpx;
			}
		}

		&:last-child {
			position: absolute;
			right: 0;
			top: 188rpx;
		}

	}
</style>